<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>骨医快线</title>
	<link href="../../css/mui.plus.css" rel="stylesheet" />		
	<style type="text/css">
		.pat-scale {
			color: #666;
		}
		.pat-title, .pat-subject {
			padding: 11px 15px;
		}
		.pat-title .pat-small {
			font-size: 12px;
		}
		.mui-content b {
			color: #30B497;
		}
		.pat-subject .mui-input-row {
			font-size: 15px;
			color: #666;
		}
		.pat-subject {
			color: #333;
		}
		.mui-input-group .mui-input-row:after, 
		.mui-input-group:after,
		.mui-input-group:before {
			height: 0;
		}
		.mui-input-group {
			margin: 0 15px;
			background-color: #f5f5f5;
		}
		.mui-radio input[type="radio"]:before, .mui-checkbox input[type="checkbox"]:before {
			font-size: 20px;
		}
		footer {
			padding: 20px 30%;
		}
		.mui-btn-block {
			padding: 8px 0;
		}
		p:first-child {
		    margin-top: 10px;
		}
		input[type='range'] {
		    position: relative;
		    width: 80%;
		    height: 2px;
		    margin: 17px 0;
		    padding: 0;
		    cursor: pointer;
		    border: 0;
		    border-radius: 3px;
		    outline: none;
		    background-color: #999;
		    -webkit-appearance: none !important;
		}
		input[type='range']::-webkit-slider-thumb {
			width: 15px;
		    height: 15px;
		
		    border-color: #25aa88;
		    border-radius: 50%;
		    background-color: #30b497;
		    background-clip: padding-box;
		
		    -webkit-appearance: none !important;
		}
	</style>
</head>
<body>
	<header class="mui-bar mui-bar-nav oe-pri-bar">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	    <h1 class="mui-title">量表详情</h1>
	</header>
	
	<div id="topic-list" class="mui-content pat-scale">
		<ul id="pa-info" class="mui-table-view common-img-text-list">
			<li class="mui-table-view-cell mui-media">
				<a href="javascript:;">
					<img class="mui-media-object mui-pull-left" src="../../images/pa_avatar.png" style="border-radius: 100px;">
					<div class="mui-media-body" style="padding-top: 15px;">
						<span class="pa-name">加载中...</span>
						<span class="pa-sur"></span>
					</div>
				</a>
			</li>
		</ul>
		
		<div class="oe-divide-block"></div>
		
		<div id="list-result">
			<div class="pat-title">
				<div>
					<span>加载中...</span>
					<span class="mui-pull-right pat-small">共&nbsp;<b>N</b>&nbsp;题</span>
				</div>
				<div>
					<span class="pat-small">评分&nbsp;<b>xx分</b></span><br />
					<span class="pat-small"><b>N</b>日前</span>
				</div>
			</div>
			
			<form class="mui-input-group">
		    	<div class="oe-emp">
	        		<img src="../../images/blank_page/pub.png"/>
	        	</div>
			</form>	
		</div>
		
	</div>
	
	<script id="tmp-pa" type="text/html">
		<li class="mui-table-view-cell mui-media">
			<a href="javascript:;">
				<img class="mui-media-object mui-pull-left" src="../../images/pa_avatar.png" style="border-radius: 100px;">
				<div class="mui-media-body" style="padding-top: 15px;">
					<span class="pa-name">{{pa.rec_name}}</span>
					<span class="pa-sur">{{pa.rec_surgery_name}}</span>
				</div>
			</a>
		</li>
	</script>
	
	<script id="tmp-result" type="text/html">
		{{each local as v i}}
			{{if v.rs_id === server.rs_id}}
				<div class="pat-title">
					<div>
						<span>{{server.rs_name}}</span>
						<span class="mui-pull-right pat-small">共&nbsp;<b>{{server.count}}</b>&nbsp;题</span>
					</div>
					<div>
						<span class="pat-small"><b>评分</b>&nbsp;{{server.score.score}}分</span>
						<br />
						{{if server.score.evaluate}}
							<span class="pat-small"><b>评估结果</b>&nbsp;{{server.score.evaluate}}</span>
							<br />
						{{/if}}
						<span class="pat-small"><b>评估时间</b> &nbsp;{{server.time}}</span>
					</div>
				</div>
				
				<form class="mui-input-group">
			    	{{each v.subjects as u j}}
			    		{{each server.subjects as x a}}
			    			{{if x.subject_id === u.subject_id}}
								<div class="pat-subject">
					    		<span>{{u.subject_num}}.{{u.subject_question}}</span>
				    				{{each x.options as y b}}
							    		{{each u.options as w k}}
								    		{{if b === 'option_id' && x.options[b] === w.option_id}}
								    			<div>
									    			<p>您的选项是&nbsp;{{w.option_content}}</p>
									    		</div>
									    	{{/if}}
 							    		{{/each}}
						    		{{/each}}
						    		{{if x.subject_value}}
						    			<div>
							    			<p>您的选项是&nbsp;{{x.subject_value}}</p>
							    			<label>{{u.subject_min}}</label>
								        	<input type="range" min="{{u.subject_min}}" max="{{u.subject_max}}" value="{{x.subject_value}}">
							    			<label>{{u.subject_max}}</label>
							    		</div>
						    		{{/if}}
				    			</div>	
					    	{{/if}}
			    		{{/each}}
			    	{{/each}}
				</form>
			{{/if}}
		{{/each}}
	</script>
	
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/app.js"></script>
	<script src="../../js/lib/template.js"></script>
	<script src="../../data/scale.data.js"></script>
	<script type="text/javascript">
		(function($, a){
			var tmpData = {local: scaleData.data},
				html,
				wv,
				id = {};
				
			$.plusReady(function(){
				var wv = plus.webview.currentWebview();
				id = wv.transId;
				
				// 病人信息
				getPatientInfoByRecId(id.rec_id);
				getResultByScaleRecordId(id.sc_rec_id);
			});
			
			var getPatientInfoByRecId = function(recId){
				app.net.get('c_med_record/show', {rec_id: recId}, function(data){
					if(data &&data.code === '100'){
						tmpData.pa = data.data;
						html = template('tmp-pa', tmpData)
						document.getElementById("pa-info").innerHTML = html;
					}
				});
			}
			
			var getResultByScaleRecordId = function(scRecId){
				app.net.get('c_rating_scale_record/show_detail', {rec_id: scRecId}, function(data){
					if(data &&data.code === '100'){
						tmpData.server = data.data;
						tmpData.server.score.score = objToStr(tmpData.server.score.score)
						tmpData.server.score.evaluate = objToStr(tmpData.server.score.evaluate)
						html = template('tmp-result', tmpData);
						document.getElementById("list-result").innerHTML = html;
					}
				});
			}
			
			var objToStr = function(obj){
				if((typeof obj === 'string') || (typeof obj === 'number')){
					return obj + '\n';
				}else if(typeof obj === 'object'){
					var tmp = '';
					for(var i in obj){
						tmp += i + ':' + obj[i] + '\n'
					}
					return tmp;					
				}else {
					console.error('Type error');
				}
			}
			
		}(mui, app));
	</script>
</body>
</html>